<template>
	<view class="login">
		<view class="login-head">
			<view class="head-box">
				<view class="logo">
					<image class="logoimg" :src="_baseURL + setting.site_logo" mode=""></image>
					<image @click="goback()" class="close" src="../../static/img/close.png" mode=""></image>
				</view>
				<view class="notes">
					<h4>
						欢迎来到
						<b>太平洋娱乐</b>
					</h4>
					<view class="sub">现在就开始你的游戏之旅吧!</view>
					<view class="title">登录账户</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="con">
				<view class="common">
					<input class="input" :class="{inputTow:isErrorText}" v-model="name" @blur="getEmali" type="text"
						placeholder="邮箱" placeholder-class="place" />
					<view class="dafade" v-if="isErrorText">
						邮箱格式不正确
					</view>
				</view>
				<view class="common">
					<input class="input" v-model="psd" :type="psdtype" placeholder="密码" placeholder-class="place" />
					<image class="mimashowhide" v-if="showmima" @click="changemimashowhide()"
						src="../../static/img/mimahide.png" mode=""></image>
					<image class="mimashowhide" v-else @click="changemimashowhide()" src="../../static/img/mimashow.png"
						mode=""></image>
				</view>
				<view class="remember-forget">
					<checkbox-group @change="checkboxChange()">
						<label>
							<checkbox class="checkboxs" :checked="forgotpsd" iconColor="#33d47e" /><text>记住密码</text>
						</label>
					</checkbox-group>
					<view>忘记密码？</view>
				</view>
				<view class="login-btn" @click="logins()">登 录</view>
				<view class="to-regist">
					<!-- <view class="left" @click="goregister()">
						还没有账户？<text>创建账户</text>
					</view> -->
					<view class="left">

					</view>
					<image src="../../static/img/kefu.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		sysconfig
	} from '../../api/api.js'
	import {
		baseURL
	} from '../../api/http.js'
	export default {
		data() {
			return {
				name: '',
				psd: '',
				showmima: true,
				psdtype: 'password',
				forgotpsd: false,

				_baseURL: baseURL,
				setting: [],
				isErrorText:false
			}
		},
		onLoad() {
			if (uni.getStorageSync('username')) {
				this.name = uni.getStorageSync('username').name
				this.psd = uni.getStorageSync('username').password
			}
			this.getsysconfig()
		},
		methods: {
			checkEmail(email) {
				return RegExp(
						/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)
					.test(email);
			},
			getEmali() {
				if (!this.checkEmail(this.name)) {
					this.isErrorText = true;
				}
			},
			getsysconfig() {
				sysconfig().then(res => {
					if (res.data.status.errorCode == 0) {
						this.setting = res.data.data
					} else {
						uni.showToast({
							title: res.data.status.msg,
							icon: 'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			changemimashowhide() {
				if (this.showmima) {
					this.showmima = false
					this.psdtype = 'text'
				} else {
					this.showmima = true
					this.psdtype = 'password'
				}
			},
			goregister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			checkboxChange(e) {
				this.forgotpsd = !this.forgotpsd
			},
			goback() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			logins() {
				let that = this;
				if (this.name == '') {
					uni.showToast({
						title: '请输入用户名',
						icon: 'error',
						duration: 2000
					});
					return false
				}
				if (this.psd == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'error',
						duration: 2000
					});
					return false
				}
				if (!this.checkEmail(this.name)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'error',
						duration: 2000
					});
					return false
				}
				let datas = {
					name: this.name,
					password: this.psd
				}
				login(datas).then(res => {
					if (res.data.status.errorCode == 0) {
						uni.showToast({
							title: res.data.status.msg,
							icon: 'success',
							duration: 2000
						});
						if (that.forgotpsd) {
							uni.setStorage({
								key: 'username',
								data: datas
							})
						} else {
							uni.removeStorageSync('username')
						}
						uni.setStorage({
							key: 'token',
							data: res.data.data
						})
						setTimeout(function() {
							uni.hideToast()
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 700)
					} else {
						uni.showToast({
							title: res.data.status.msg,
							icon: 'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.login {
		width: 100%;
		min-height: 100vh;
		background-color: #202327;
	}

	.login-head {
		width: 100%;
		height: 514rpx;
		background: url('../../static/img/loginbg.jpg') no-repeat center 50rpx;
		background-size: cover;
	}

	.head-box {
		width: 100%;
		padding: 32rpx 40rpx 0 40rpx;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.logo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo .logoimg {
		width: 100rpx;
		height: 80rpx;
	}

	.logo .close {
		width: 38rpx;
		height: 38rpx;
	}

	.notes {
		text-align: center;
		align-self: flex-end;
		margin-top: 108rpx;
		color: #fff;
	}

	h4 {
		font-weight: 700;
		font-size: 34rpx;
		line-height: 40rpx;
	}

	b {
		color: #27d477;
	}

	.sub {
		line-height: 30rpx;
		color: #9ba6b3;
		font-size: 24rpx;
	}

	.title {
		text-align: right;
		font-weight: 900;
		font-size: 36rpx;
		margin-top: 52rpx;
	}

	.main {
		margin-top: -60rpx;
		position: relative;
	}

	.con {
		width: 100%;
		padding: 48rpx 40rpx 60rpx 40rpx;
		margin-top: 86rpx;
	}

	.common {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		flex-wrap: nowrap;
		position: relative;
		margin-bottom: 20rpx;
	}
	.dafade {
		font-size: 13px;
		color: #dc3545;
		width: 100%;
		text-align: left;
	}
	

	.input {
		height: 100rpx;
		width: 100%;
		border: 0;
		padding: 24rpx 40rpx;
		border-radius: 4rpx;
		background: #1a1c20;
		overflow: visible;
		font-size: 28rpx;
		color: #fff;
		border: 2rpx solid #1a1c20;
	}
	 .inputTow {
		border: 2rpx solid #dc3545;
	}

	.place {
		font-size: 24rpx;
		color: #7c7c7c;
	}

	.mimashowhide {
		width: 34rpx;
		height: 34rpx;
		padding: 0 16rpx;
		position: absolute;
		top: 50%;
		right: 16rpx;
		margin-top: -17rpx;
		box-sizing: content-box;
	}

	.remember-forget {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
	}

	/deep/ .uni-label-pointer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/deep/ .uni-checkbox-input {
		width: 26rpx;
		height: 26rpx;
		margin-right: 0;
		box-sizing: border-box;
		background-color: transparent;
		border-color: #33d47e;
		margin-top: -6rpx;
	}

	/deep/ .uni-checkbox-input svg {
		transform: translate(-50%, -48%) scale(0.5);
	}

	.remember-forget text {
		margin-left: 10rpx;
	}

	.login-btn {
		width: 100%;
		height: 64rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 64rpx;
		border-radius: 12rpx;
		background: #fee619;
		font-weight: 700;
		color: #1c1e22;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}

	.to-regist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		color: #97a6b4;
		font-size: 28rpx;
		font-weight: 600;
	}

	.left text {
		color: #33d47e;
		font-size: 32rpx;
	}

	.to-regist image {
		width: 34rpx;
		height: 32rpx;
	}
</style>